<template>
	<view class="content">
		<!-- 页面背景 -->
		<view class="page_back"></view>
		<u-navbar
			title="育儿师咨询"
			@leftClick="leftClick"
			:placeholder="true"
			:fixed="true"
			bgColor="transparent"
			:autoBack="true"
		>
		</u-navbar>
		
		
		<view class="change_box" @click="VipBuyShowButton">
			<view class="change_son">
				<view class="chaneg_title">请选择育儿师</view>
				
				<view class="change_buton_box">
					<view class="bton_one">
						<view class="text_box_pos1">育婴师</view>
						<view class="text_box_pos2">主要针对0~3岁婴幼儿进行生活护理及教育</view>
					</view>
					<view class="bton_one">
						<view class="text_box_pos1">营养师</view>
						<view class="text_box_pos2">营养检测、营养强化、宝宝获取健康</view>
					</view>
					<view class="bton_one">
						<view class="text_box_pos1">早教师</view>
						<view class="text_box_pos2">幼儿保育、教育、教育指导、顾问、教学的教师</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 底部聊天消息框 -->
		<view class="chat_button">
			<view class="chat_son_box">
				<view class="chat_qiehuan">
					<image class="qieh_img" src="../../static/img/chat/qie.png"></image>
				</view>
				<view class="input_box">
					<input class="input_css" placeholder="请输入" placeholder-class="place_class" />
				</view>
				<view class="chat_add">
					<image class="chat_addimg" src="../../static/img/chat/add.png"></image>
				</view>
			</view>
		</view>
		
		<!-- 会员到期弹窗提醒 起 -->
		<ZnDaoqi v-if="VipBuyShow"></ZnDaoqi>
		<!-- 会员到期弹窗提醒 终 -->
	</view>
</template>

<script>
	import ZnDaoqi from '@/pages/daoqi/daoqi.vue';
	export default {
		components: {
			ZnDaoqi
		},
		data(){
			return{
				VipBuyShow: false,//会员到期弹窗提醒
			}
		},
		onLoad() {
			
		},
		methods:{
			leftClick(){
				uni.navigateBack({
					delta:1,
				})
			},
			VipBuyShowButton(){
				this.VipBuyShow = true;
			}
		}
	}
</script>

<style>
	page{
		background-color: #F6F6F6;
	}
	.content{
		width: 100%;
		overflow-x:hidden;
	}
	.page_back{
		z-index: -100;
		background: linear-gradient(180deg, #6EC5FF 0%, rgba(167, 228, 255, 0) 100%);
		opacity: 0.11;
		width: 100%;
		height: 913upx;
		position: absolute;
	}
	.chat_son_box{
		padding: 38upx 26upx 30upx 34upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	.chat_qiehuan{
		width: 52upx;
		height: 52upx;
	}
	.qieh_img{
		width: 52upx;
		height: 52upx;
	}
	.chat_button{
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		width: 100%;
		/* box-sizing: border-box; */
		/* padding-top: 20upx;
		padding-right: 28upx;
		padding-left: 52upx; */
		height: 120upx;
		
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);  
	}
	.input_box{
		width: 560upx;
		height: 72upx;
		padding: 16upx 0 16upx 24upx;
		box-sizing: border-box;
		background: #F7F7F7;
		border-radius: 8upx;
		margin-left: 14upx;
		margin-right: 12upx;
	}
	.input_css{
		width: 364upx;
		height: 40upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40upx;
	}
	.chat_add{
		width: 52upx;
		height: 52upx;
	}
	.chat_addimg{
		width: 52upx;
		height: 52upx;
	}
	.place_class{
		font-size: 28upx;
		color: #999999;
	}
	.change_son{
		padding: 44upx 44upx 48upx 36upx;
		box-sizing: border-box;
	}
	.chaneg_title{
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44upx;
	}
	.change_buton_box{
		margin-top: 40upx;
		margin-left: 14upx;
		width: 602upx;
		height: 122upx;
		
	}
	.bton_one{
		width: 602upx;
		height: 122upx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-bottom: 36upx;
		border: 2upx solid #CACACA;
		box-sizing: border-box;
		border-radius: 50upx;
	}
	.text_box_pos1{
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44upx;
	}
	.text_box_pos2{
		font-size: 24upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 44upx;
	}
	.change_box{
		position: fixed;
		background-color: #FFFFFF;
		bottom: 240upx;
		margin: auto;
		margin-left: 28upx;
		border-radius: 12upx;
		height: 614upx;
	}
</style>
